<template>
  <div class="body_all">
    <div class="ba_main" style="margin-top: 0">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="联系人设置" name="contacts">
          <el-button
            :type="contactsType == 0 ? 'primary' : ''"
            size="mini"
            @click="contactsType = 0"
            >来源设置</el-button
          >
          <el-button
            :type="contactsType == 1 ? 'primary' : ''"
            size="mini"
            @click="contactsType = 1"
            >跟进状态设置</el-button
          >
          <el-button
            :type="contactsType == 2 ? 'primary' : ''"
            size="mini"
            @click="contactsType = 2"
            >放弃原因设置</el-button
          >
          <el-button
            :type="contactsType == 3 ? 'primary' : ''"
            size="mini"
            @click="contactsType = 3"
            >删除原因设置</el-button
          >
          <el-button
            :type="contactsType == 4 ? 'primary' : ''"
            size="mini"
            @click="contactsType = 4"
            >企微标签</el-button
          >
          <el-button
            :type="contactsType == 5 ? 'primary' : ''"
            size="mini"
            @click="contactsType = 5"
            >业务标签</el-button
          >
        </el-tab-pane>
        <el-tab-pane label="企业设置" name="enterprise">
          <el-button
            :type="enterpriseType == 0 ? 'primary' : ''"
            size="mini"
            @click="enterpriseType = 0"
            >来源设置</el-button
          >
          <el-button
            :type="enterpriseType == 1 ? 'primary' : ''"
            size="mini"
            @click="enterpriseType = 1"
            >跟进状态设置</el-button
          >
          <el-button
            :type="enterpriseType == 2 ? 'primary' : ''"
            size="mini"
            @click="enterpriseType = 2"
            >放弃原因设置</el-button
          >
          <el-button
            :type="enterpriseType == 3 ? 'primary' : ''"
            size="mini"
            @click="enterpriseType = 3"
            >删除原因设置</el-button
          >
          <el-button
            :type="enterpriseType == 4 ? 'primary' : ''"
            size="mini"
            @click="enterpriseType = 4"
            >标签设置</el-button
          >
        </el-tab-pane>
        <el-tab-pane label="群设置" name="group"></el-tab-pane>
      </el-tabs>
      <!-- 联系人设置-来源设置||企业设置-来源设置 -->
      <div
        v-if="
          (activeName == 'contacts' && contactsType == 0) ||
          (activeName == 'enterprise' && enterpriseType == 0)
        "
      >
        <div class="sourceC">
          来源是否必填
          <el-switch v-model="sourceR"> </el-switch>
          <span>开启后，新增企业时，来源为必选字段</span>
        </div>
        <h4>基本来源</h4>
        <el-table :data="basicData" height="250" style="width: 100%">
          <el-table-column
            prop="date"
            label="来源名称(系统字段，不支持启用、编辑)"
          >
          </el-table-column>
        </el-table>
        <div class="h4_btn">
          <h4>自定义来源</h4>
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="editerData"
            >新增来源</el-button
          >
        </div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column prop="date" label="来源名称"> </el-table-column>
          <el-table-column prop="date" label="启用">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.satrt"> </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            v-if="activeName != 'friends'"
            width="100"
            prop="address"
            label="操作"
            flex="right"
          >
            <template slot-scope="scope">
              <span
                class="edit_btn"
                @click="editerData(scope.row)"
                fixed="right"
                >编辑</span
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="footerPage">
          <i class="el-icon-arrow-left"></i>
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <!-- 联系人设置-跟进状态设置 -->
      <div
        v-if="
          (activeName == 'contacts' && contactsType == 1) ||
          (activeName == 'enterprise' && enterpriseType == 1)
        "
      >
        <div class="h4_btn">
          <h4>跟进状态</h4>
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="editerData"
            >新增跟进状态</el-button
          >
        </div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column prop="date" label="来源名称"> </el-table-column>
          <el-table-column prop="date" label="是否启用">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.satrt"> </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="是否自动变更">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.satrt"> </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            v-if="activeName != 'friends'"
            width="100"
            prop="address"
            label="操作"
            flex="right"
          >
            <template slot-scope="scope">
              <span
                class="edit_btn"
                @click="editerData(scope.row)"
                fixed="right"
                >编辑</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 联系人设置-放弃原因设置 -->
      <div
        v-if="
          (activeName == 'contacts' && contactsType == 2) ||
          (activeName == 'enterprise' && enterpriseType == 2)
        "
      >
        <div class="h4_btn">
          <h4>放弃原因</h4>
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="editerData"
            >新增放弃原因</el-button
          >
        </div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column prop="date" label="放弃原因"> </el-table-column>
          <el-table-column prop="date" label="是否启用">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.satrt"> </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            v-if="activeName != 'friends'"
            width="100"
            prop="address"
            label="操作"
            flex="right"
          >
            <template slot-scope="scope">
              <span
                class="edit_btn"
                @click="editerData(scope.row)"
                fixed="right"
                >编辑</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 联系人设置-删除原因设置 -->
      <div
        v-if="
          (activeName == 'contacts' && contactsType == 3) ||
          (activeName == 'enterprise' && enterpriseType == 3)
        "
      >
        <div class="h4_btn">
          <h4>删除原因</h4>
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="editerData()"
            >新增删除原因</el-button
          >
        </div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column prop="date" label="删除原因"> </el-table-column>
          <el-table-column prop="date" label="是否启用">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.satrt"> </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            v-if="activeName != 'friends'"
            width="100"
            prop="address"
            label="操作"
            flex="right"
          >
            <template slot-scope="scope">
              <span
                class="edit_btn"
                @click="editerData(scope.row)"
                fixed="right"
                >编辑</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 标签设置 -->
      <div
        v-if="
          (activeName == 'contacts' && contactsType == 4) ||
          contactsType == 5 ||
          (activeName == 'enterprise' && enterpriseType == 4) ||
          activeName == 'group'
        "
      >
        <h4 v-if="activeName == 'contacts' && contactsType == 4">企微标签</h4>
        <h4 v-else-if="activeName == 'contacts' && contactsType == 5">
          业务标签
        </h4>
        <h4 v-else-if="activeName == 'enterprise' && enterpriseType == 4">
          标签
        </h4>
        <h4 v-else>群标签</h4>
        <el-container
          style="border-right: 1px solid #eee; border-top: 1px solid #eee"
        >
          <el-aside width="200px">
            <el-menu :default-openeds="['1']">
              <el-submenu index="1">
                <template slot="title"
                  ><i class="el-icon-plus" @click.stop="editerData()"></i>
                  <span v-if="activeName == 'contacts' && contactsType == 4"
                    >企微标签</span
                  >
                  <span
                    v-else-if="activeName == 'contacts' && contactsType == 5"
                    >业务标签</span
                  >
                  <span
                    v-else-if="
                      activeName == 'enterprise' && enterpriseType == 4
                    "
                    >标签</span
                  >
                  <span v-else>群标签</span>
                </template>
                <el-menu-item
                  v-for="(item, i) in labelList"
                  :key="i"
                  :index="'' + i"
                  >{{ item }}</el-menu-item
                >
              </el-submenu>
            </el-menu>
          </el-aside>

          <el-container>
            <el-header style="margin-top: 16px">
              <el-input
                v-model="labelSearch"
                placeholder="搜索标签"
                size="mini"
                style="width: 150px"
              ></el-input>
              <el-button type="primary" icon="el-icon-search" size="mini"
                >搜索</el-button
              >
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                style="float: right"
                @click="editerData()"
                >新增标签</el-button
              >
            </el-header>
            <el-main style="margin-left: 15px">
              <el-table :data="tableData">
                <el-table-column prop="date" label="标签名称">
                </el-table-column>
                <el-table-column prop="name" label="标签组名称">
                </el-table-column>
                <el-table-column label="操作" width="100" flex="right">
                  <template slot-scope="scope">
                    <span class="edit_btn" @click="editerData(scope.row)"
                      >编辑</span
                    >
                    <span
                      class="edit_btn"
                      style="margin-left: 10px"
                      @click="delData(scope.row.id)"
                      >删除</span
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-main>
          </el-container>
        </el-container>
      </div>
    </div>
    <!-- 来源编辑 -->
    <el-dialog
      :title="titleSource"
      :close-on-click-modal="false"
      :visible.sync="sourceEditer"
      width="45%"
      :close-on-press-escape="false"
    >
      <div class="dialogDiv">
        <el-form
          :model="sourceData"
          :rules="rulesSource"
          ref="sourceData"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="来源" prop="name">
            <el-input
              v-model="sourceData.name"
              placeholder="请输入来源"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-switch v-model="sourceData.start"> </el-switch>
          </el-form-item>
        </el-form>
      </div>
      <div class="foot_btn">
        <el-button @click="resetSource('sourceData')">取消</el-button>
        <el-button type="primary" @click="submitSource('sourceData')"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      // 搜索条件
      searchList: {
        name: "",
        phone: "",
      },
      activeName: "contacts",
      contactsType: 5,
      enterpriseType: 0,
      sourceR: false, //来源是否必填
      sourceEditer: false,
      titleSource: "",
      sourceData: {
        name: "",
        start: 0,
      },
      rulesSource: {
        name: [{ required: true, message: "请输入来源", trigger: "blur" }],
      },
      basicData: [],
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      //   标签
      labelSearch: "",
      labelList: [
        "微信好友状态",
        "需求重点",
        "客户行业",
        "联系人特征",
        "联系人分组",
      ],
    };
  },
  created() {},
  methods: {
    // 条件重置
    btnRefresh() {
      this.searchList = this.$options.data().searchList;
    },
    handleClick(tab, event) {
      this.activeName = tab.name;
    },
    // 新增&编辑
    editerData(obj) {
      let titFirst = "";
      if (obj) {
        titFirst = "编辑";
      } else {
        titFirst = "新增";
      }
      if (this.activeName == "contacts") {
        // 联系人设置
        switch (this.contactsType) {
          case 0:
            this.titleSource = titFirst + "来源";
            break;
          case 1:
            this.titleSource = titFirst + "跟进状态";
            break;
          case 2:
            this.titleSource = titFirst + "放弃原因";
            break;
          case 3:
            this.titleSource = titFirst + "删除原因";
            break;
          case 4:
            this.titleSource = titFirst + "标签";
            break;
          case 5:
            this.titleSource = titFirst + "标签";
            break;
          default:
            break;
        }
      } else if (this.activeName == "enterprise") {
        // 企业设置
        switch (this.contactsType) {
          case 0:
            this.titleSource = titFirst + "来源";
            break;
          case 1:
            this.titleSource = titFirst + "跟进状态";
            break;
          case 2:
            this.titleSource = titFirst + "放弃原因";
            break;
          case 3:
            this.titleSource = titFirst + "删除原因";
            break;
          case 4:
            this.titleSource = titFirst + "标签";
            break;
          default:
            break;
        }
      } else {
        // 群设置
        this.titleSource = titFirst + "标签";
      }
      this.sourceEditer = true;
    },
    // 取消&关闭
    resetSource(formName) {
      this.$refs[formName].resetFields();
      this.sourceEditer = false;
      this.sourceData = this.$options.data().sourceData;
    },
    // 提交
    submitSource(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
          this.sourceEditer = false;
          this.sourceData = this.$options.data().sourceData;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    delData() {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style scoped>
.labelType {
  display: flex;
}
.labelType .label {
}
.labelType .table {
  flex-grow: 1;
}
</style>